{% extends "../theme/bage.html" %}
{% block typebody %}
<script type="text/javascript">
    $().ready(function () {
        $("#form_regist").validate(
                {
                    rules: {
                        user_name: {
                            required: true,
                            rangelength: [5, 16]
                        },
                        user_pass: {
                            required: true,
                            rangelength: [6, 20]
                        },
                        user_pass2: {
                            required: true,
                            equalTo: "#user_pass"
                        },
                        user_email: {
                            required: true,
                            email: true
                        }
                    },
                    messages: {
                        user_name: {
                            required: "<span class='red'>Please enter your user name</span>",
                            rangelength: "<span class='red'>The user name for at least five, up to 16</span>"
                        },

                        user_pass: {
                            required: "<span class='red'>Please enter the password</span>",
                            rangelength: "<span class='red'>Password for at least six, up to 20 </span>"
                        },
                        user_pass2: {
                            required: "<span class='red'>Please enter the password</span>",
                            equalTo: "<span class='red'>Enter the password twice</span>"
                        },
                        user_email: {
                            required: "<span class='red'>Please enter a correct E-mail </span>",
                            email: "<span class='red'>Please enter a correct E-mail</span>"
                        }
                    }
                }
        );
    });


</script>

<div class="mtop">
    <ul class="breadcrumb">
        <li>{{ _('Current location') }}: <a href="{% module site_url() %}">{{ _('Home') }}</a></li>
        <li class="active">{{ _('Regist') }}</li>
    </ul>
</div>
<div class="panel panel-black">
    <div class="panel-heading"><b>{{ _('Regist') }} </b></div>
    <div class="panel-body">
        <form id="form_regist" action="/user/regist" method="post" class="form-horizontal" role="form">
            <fieldset>
                <input value="0" type="hidden" id="ext_type" name="ext_type" class="form-control">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="user_name">{{ _('User name') }}： </label>

                    <div class="col-sm-10">
                        <input class="form-control" id='user_name' type="text" name="user_name"
                               placeholder="User name must be alphabetic or alphanumeric combination (letter).">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="user_pass">{{ _('Password') }}：</label>

                    <div class="col-sm-10">
                        <input class="form-control" id="user_pass" type="password" name="user_pass"
                               placeholder="Password at least 6, the longest 20. " onchange="check_strength()">
                        <div class="progress" id="progress" style="display: none">
                        <div class="progress-bar progress-bar-danger" role="progressbar" id="progress25"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 25%; display: none">
                            <span class="sr-only">25%</span>
                        </div>
                        <div class="progress-bar progress-bar-warning" role="progressbar" id="progress50"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 25%;  display: none">
                            <span class="sr-only">50%</span>
                        </div>

                        <div class="progress-bar progress-bar-info" role="progressbar" id="progress75"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 25%;  display: none">
                            <span class="sr-only">75%</span>
                        </div>

                         <div class="progress-bar progress-bar-success" role="progressbar" id="progress100"
                             aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                             style="width: 25%;  display: none">
                            <span class="sr-only">100%</span>
                        </div>

                    </div>
                    </div>
                </div>


                <div class="form-group">
                    <label class="col-sm-2 control-label" for="user_pass2">{{ _('Confirm password') }}：</label>

                    <div class="col-sm-10">
                        <input class="form-control" id="user_pass2" type="password" name="user_pass2"
                               placeholder="Please confirm and password input. ">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="user_email">{{ _('Email') }} ：</label>

                    <div class="col-sm-10">
                        <input class="form-control" id="user_email" type="email" name="user_email"
                               placeholder="Please enter a correct E-mail.">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 control-label" for="sub1"></label>

                    <div class="col-sm-10">
                        <button id="sub1" type="submit" class="btn btn-primary">{{ _('Submit') }}</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
</div>
{% end %}

